<template>
  <div class="article-page">
    <van-nav-bar left-arrow @click-left="$router.back()" fixed>
      <template #right>
        <van-icon name="ellipsis" size="5.4vw"></van-icon>
      </template>
    </van-nav-bar>
    <div class="article-wrapper">
      <!-- 头部：标题 时间 作者 -->
      <div class="header">
        <h3 class="title">
          {{article.title}}
        </h3>
        <div class="time">
          <span>2019年03月11日</span>
          <span>|</span>
          <span>{{article.read_count}} 阅读</span>
          <span>|</span>
          <span>61 评论</span>
        </div>
        <div class="author van-hairline--bottom">
          <van-image
            round
            width="10vw"
            height="10vw"
            :src="article.aut_photo"
          />
          <span class="name">{{article.aut_name.substring(0,5)}}</span>
          <van-button round size="small" color="#FC6627">+关注</van-button>
        </div>
      </div>
      <!-- 内容：文章内容 -->
      <div class="main">
        <div class="html">
          <p v-html="article.content">
          </p>
        </div>
        <div class="space"></div>
      </div>
      <!-- 评论：评论组件 -->
    </div>
  </div>
</template>
<script>
import { articleDetail } from '@/api/article'
import to from 'await-to-js'
export default {
  data () {
    return {
      article_id: '',
      article: {}
    }
  },
  name: 'ArticlePage',
  async created () {
    this.article_id = this.$route.params.article_id
    const [err, res] = await to(articleDetail(this.article_id))
    console.log(err, res)
    this.article = res.data.data
  }
}
</script>
<style scoped lang="less">
.article-wrapper {
  height: 100%;
  overflow-y: auto;
  padding: 44px 0 50px;
  // 头部
  .header {
    padding: 0 16px;
    .title {
      font-size: 20px;
      font-weight: normal;
      padding: 10px 0;
      margin: 0;
    }
    .time {
      font-size: 12px;
      color: #999;
      span:nth-child(2n) {
        margin: 0 5px;
        color: #ccc;
        position: relative;
        top: -1px;
      }
    }
    .author {
      display: flex;
      align-items: center;
      padding: 10px 0 ;
      .name {
        flex: 1;
        padding-left: 10px;
        font-size: 16px;
      }
    }
  }
  // 内容
  .main {
    .space {
      height: 16px;
      background: @geek-gray-color;
    }
    .html {
      word-break: break-all;
      width: 100%;
      overflow: hidden;
      padding: 20px 16px;
      /deep/ img {
        max-width:100%;
        background: #f9f9f9;
      }
      /deep/ pre {
        white-space: pre-wrap;
        code {
          white-space: pre;
        }
      }
    }
  }
}
</style>
